<template>
    <div class="form-sty">
        <div class="form-title" >
            <div class="span-radius"></div>
            状态占比
        </div>
        <div class="dialChart-sty" >
            <div>
                <div style="width:200px;height:188px" ref="bingtubp"></div>
                <div  class="zheng-sty sty-one">{{ onestate}}</div>
            </div>
            <div>
                <div style="width:200px;height:188px" ref="bingtubptwo"></div>
                <div  class="zheng-sty sty-two">{{ twostate }}</div>
            </div>
            <div>
                <div style="width:200px;height:188px" ref="bingtubpthree"></div>
                <div  class="zheng-sty sty-three">{{ threestate }}</div>
            </div>
            <div>
                <div style="width:200px;height:188px" ref="bingtubpfour"></div>
                <div  class="zheng-sty sty-four">{{ fourstate }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted,onBeforeUnmount,onUnmounted } from 'vue';
import * as echarts from 'echarts';

    const bingtubp = ref(null);
    const bingtubptwo = ref(null);
    const bingtubpthree = ref(null);
    const bingtubpfour = ref(null);

    const onebp = ref(0)
    const twobp = ref(0)
    const threebp = ref(0)
    const fourbp = ref(0)

    const onestate = ref('')
    const twostate = ref('')
    const threestate = ref('')
    const fourstate = ref('')

    const RadarGet = async () => {

        try {
            onestate.value = '正常'
            onebp.value = 80
            twostate.value = '发热'
            twobp.value = 75
            threestate.value = '轻微'
            threebp.value = 63
            fourstate.value = '重度'
            fourbp.value = 88

            createAndUpdateChart(bingtubp, onebp.value, 0,);
            createAndUpdateChart(bingtubptwo, twobp.value, 0);
            createAndUpdateChart(bingtubpthree, threebp.value, 0);
            createAndUpdateChart(bingtubpfour, fourbp.value, 0);

        } catch (e) {
            console.log('请求失败', e)
            
        }
    }

    onMounted(async () => {
            await RadarGet();
            const timer = setInterval(RadarGet, 10000); 
            
            onUnmounted(() => clearInterval(timer));
            // RadarGet();
        });
function createAndUpdateChart(chartRef, value, angle) {
  const myChart = echarts.init(chartRef.value);
  myChart.hideLoading();

  let timerId = null;

  const option = {
    // 图表配置项...
    title: {
                    text: '{a|' + value + '}',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 30,
                                color: '#29EEF3'
                            },
                        }
                    }
                },
                series: [
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    // startAngle: (270 + -angle) * Math.PI / 180,
                                    // endAngle: (40 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },  
                    {
                        name: '频率',
                        type: 'pie',
                        radius: ['52%', '40%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: { position: "center",}
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [
                                            { offset: 0,color: '#A098FC'}, // 0% 处的颜色
                                            { offset: 0.3,color: '#4386FA'  },// 0% 处的颜色
                                            { offset: 0.6,  color: '#4FADFD'  },// 0% 处的颜色
                                            {offset: 0.8,  color: '#0CD3DB' }, // 100% 处的颜色
                                            { offset: 1, color: '#646CF9' }// 100% 处的颜色
                                        ]
                                    },
                                }
                            }
                        },
                        {
                            value: 100 - value,
                            name: "",
                            label: {
                                normal: { show: false}
                            },
                            itemStyle: {
                                normal: {  color: "#173164" }
                            }
                        }
                        ]
                    },
                    {
                        name: '频率',
                        type: 'pie',
                        radius: ['32%', '35%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 270,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [
                                            { offset: 0,color: '#00EDF3'},  // 0% 处的颜色
                                            { offset: 1, color: '#646CF9'}// 100% 处的颜色
                                    ]
                                    },
                                }
                            }
                        },
                        {
                            // value: 100 - value,
                            name: "",
                            label: {
                                normal: { show: false }
                            },
                            itemStyle: {
                                normal: { color: "#173164" }
                            }
                        }
                        ]
                    },

                ]
  };

  function draw() {
    angle += 3;
    myChart.setOption(option, true);
  }

  const startAnimation = () => {
    if (timerId) {
      clearInterval(timerId); // 避免重复设置定时器
    }
    timerId = setInterval(draw, 100);
  };

  onBeforeUnmount(() => {
    clearInterval(timerId); // 组件卸载时清除定时器，避免内存泄漏
  });

  startAnimation();
}


</script>

<style scoped>

@import "@/Css/index.css";
.dialChart-sty{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.zheng-sty{
    margin-top: -20px;
    font-size: 20px;
}
.sty-one{
    color: #1fe81c;
}
.sty-two{
    color: #dad046;
}
.sty-three{
    color: #e18344;
}
.sty-four{
    color: #f40b0b;
}
</style>